<template>

  <div class="mybody">
    <div class="detailbox">
      <div class="headTitle">

        <el-col :span="8">
          <h4>发布时间：{{ vdeatil.createdate }}</h4>
        </el-col>
        <el-col :span="8">
          <h1>{{ vdeatil.vtitle }}</h1>
        </el-col>
        <el-col :span="8" style="padding: 20px">

        </el-col>
      </div>
      <h2>{{ vdeatil.vsubhead }}</h2>
      <div v-html="vdeatil.vdetail" class="h3">
      </div>
      <div class="detail"><img class="detailImg" :src="vdeatil.vimage"></div>
      <p>活动地址：{{ realAdd }}</p>
      <div class="drawStation">
        <div id="draw-station-container">

        </div>
      </div>
      <div class="bun">
        <el-button type="danger" round @click="vcome">我要报名</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import doThis from "@/api/getData";
import {ElMessage} from "element-plus";
import * as AMapLoader from "@amap/amap-jsapi-loader";
import axios from "axios";

export default {
  name: "VolunteerDetail",
  data() {
    return {
      vdeatil: {
        createdate: "2023-08-08 13:38:09",
        uid: 3,
        user: null,
        vaddress: "121.37971,37.539407",
        vdetail: "测试测试测试",
        vid: 1,
        vimage: "https://1689324109.oss-cn-qingdao.aliyuncs.com/1691473082545-a0000.jpg",
        volunteerpeopleList: null,
        vstatus: 2,
        vsubhead: "测试测试",
        vtitle: "测试",
      },
      vid: 1,
      // 地图对象
      // 地图实例对象
      map: null,
      // 标点对象
      marker: null,
      realAdd: null,
    }
  },
  methods: {
    vcome() {
      this.$checkLogin()
      let user = JSON.parse(localStorage.getItem("user"))
      if (user !== null && user.isreal === 2) {
        doThis.doGet("/volunpeople/add", {vid: this.vid}).then(res => {
          if (res.code === "0") {
            ElMessage({
              message: res.msg,
              type: 'success',
            })
          }else {
            ElMessage.error(res.msg)
          }
          console.log(res.data)
        })
      } else {
        ElMessage.error('请先实名认证')
      }
    },
    initMap() {
      AMapLoader.load({
        key: '105771500d5f91b00104a0d28ea72c41', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Scale', 'AMap.PlaceSearch', 'AMap.AutoComplete'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
          .then((AMap) => {
            this.map = new AMap.Map("draw-station-container", {
              resizeEnable: true,
              //设置地图容器id
              viewMode: "3D", //是否为3D地图模式
              zoom: 15, //初始化地图级别
              center: [parseFloat(this.vdeatil.vaddress.split(',')[0]), parseFloat(this.vdeatil.vaddress.split(',')[1])], //初始化地图中心点位置
              // mapStyle: 'amap://styles/macaron', //设置地图的显示样式
            })
            // 地图点击事件
            new AMap.Marker({
              map: this.map,
              position: [parseFloat(this.vdeatil.vaddress.split(',')[0]), parseFloat(this.vdeatil.vaddress.split(',')[1])],
            })
          })
      axios.get("https://restapi.amap.com/v3/geocode/regeo", {
        params: {
          output: 'json',
          location: this.vdeatil.vaddress,
          key: 'f5e5504bd7700d7045245f8b7ca45b29',
          radius: '1000',
          extensions: 'all'
        }
      }).then(res => {
        this.realAdd = res.data.regeocode.formatted_address
      })
    },
  },
  mounted() {
    this.vid = this.$route.params.vid
    doThis.doGet("/volun/id", {vid: this.vid}).then(res => {
      console.log(res.data)
      this.vdeatil = res.data
    })
    console.log('vdeatil', this.vdeatil.vaddress)
    this.initMap()
  },
  beforeUnmount() {
    console.log()
    this.map.destroy('beforeUnmount running');
    this.map = null
    this.marker = null
  }
}
</script>

<style scoped>
.mybody {
  background: #f5f5f5;
}

.detailbox {
  padding: 20px;
  background: #ffffff;
  margin: 0 auto;
  width: 1200px;
}

.detailbox * {
  padding: 10px;
}

.headTitle {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  height: 50px;
  line-height: 25px;
}

h4 {
  text-align: left;
  color: #868484;
}

p {
  margin-left: 50px;
  text-align: left;
  height: 30px;
  line-height: 15px;
}

h2 {
  color: #868484;
  text-align: center;
}

/*.h3 {
  margin: 0 30px;
  font-size: 12px;
}*/
.deal{

}

.detailImg {
  width: 60%;
  margin-left: 200px;

}

.bun {
  margin: 0 auto;
  width: 100px;
}

.drawStation #draw-station-container {
  padding: 0;
  /* margin: 20px 0 20px 0; */
  margin: 50px auto;
  width: 800px;
  height: 500px;
}
</style>